<template>
  <div>
    <div class="product-title flex-a flex-b">
      <span class="name">限时秒杀</span>
      <div class="flex-a flex-b">
        <text class="ms">本场秒杀还剩</text>
        <nut-countdown v-model="time" :end-time="endTime">
          <nut-space>
            <div class="countdown-item">{{ time.h }}</div>
            <div style="color: #FF7F31;margin-top: 10rpx;">:</div>
            <div class="countdown-item">{{ time.m }}</div>
            <div style="color: #FF7F31;margin-top: 10rpx;">:</div>
            <div class="countdown-item">{{ time.s }}</div>
          </nut-space>
        </nut-countdown>
      </div>
    </div>
    <div class="product-tab">
      <div class="product-list" v-if="state.productList.length > 0">
        <div class="product-item flex-a" v-for="item in state.productList" :key="item.goodsId"
          @click="jumpTo('/packageA/pages/productDetail/index?goodsId=' + item.goodsId)">
          <div class="img"><img :src="item.goodsCoverImg" mode="aspectFit" alt=""></div>
          <div class="right">
            <div class="title">{{ item.goodsName }}</div>
            <div class="info">{{ item.goodsIntro }}</div>
            <div class="price"><text class="sell">￥{{ item.sellingPrice }}</text><text class="orgin">￥{{
              item.originalPrice
            }}</text>
            </div>
          </div>
        </div>
      </div>
      <nut-empty v-else description="无数据"></nut-empty>
    </div>
    <nut-popup :style="{ width: '80%' }" round closeable v-model:visible="state.show" class="popup-coupon">
      <div class="coupon flex-b">
        <div class="flex-a">
          <div class="left">
            <div>￥{{ state.coupon.discount }}</div>
            <div></div>
          </div>
          <div class="middle">
            <div class="flex-a"><span>{{ state.coupon.couponName }}</span>-<span>{{ state.coupon.couponDesc }}</span>
            </div>
            <div>{{ state.coupon.couponEndTime || '长期有效' }}</div>
          </div>
        </div>
        <div class="right">
          <div v-if="state.coupon.couponUserId == null" @click="getCoupons(state.coupon.couponId)">立即领取</div>
          <img v-else src="https://cxj.szzkba.cn/up/uploadPath/icon/pP4q1Sg.png" alt="">
        </div>
      </div>
      <template #close-icon>
        <CircleClose></CircleClose>
      </template>
    </nut-popup>
  </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro'
import { reactive, onMounted, ref } from 'vue';
import { CircleClose, Right } from '@nutui/icons-vue-taro';
import { getCategories, getGoodList, getCouponIndex, getCoupon, choseCoupon, getNewGoods } from '../../../../api/index'
export default {
  components: {
    CircleClose,
    Right
  },
  setup() {
    const time = ref({
      h: '00',
      m: '00',
      s: '00'
    })
    const endTime = ref(0) as any
    const state = reactive({
      list: [],
      tabList: [],
      productList: [],
      tab: 0,
      show: false,
      coupon: {},
      couponShow: false,
    });
    onMounted(() => {
      const todayEnd = new Date() as any;
      endTime.value = todayEnd.setHours(23, 59, 59, 999)
      getNewGoods().then(res => {
        if (res.resultCode == 200) {
          state.productList = res.data
        }
      })
      const router = useRouter();
      if (router.params.scene) {
        Taro.setStorage({
          key: "userId",
          data: router.params.scene.split('%3D')[1]
        })
      }
      if (router.params.userId) {
        Taro.setStorage({
          key: "userId",
          data: router.params.userId
        })
      }
      if (router.params.couponId) {
        choseCoupon(router.params.couponId).then(res => {
          if (res.resultCode == 200) {
            state.coupon = res.data
            state.show = true
          }
        })
      }
      if (router.params.goodsId) {
        Taro.navigateTo({ url: '/packageA/pages/productDetail/index?goodsId=' + router.params.goodsId })
      }
      getCategories().then(res => {
        if (res.resultCode == 200) {
          state.tabList = res.data
        }
      })
      Taro.getStorage({
        key: 'user',
        success: function (res) {
          if (res.data) {
            getCouponlist()
          }
        }
      })
      // getGoodLists(null)
    });
    const getCouponlist = () => {
      getCouponIndex().then(res => {
        state.list = []
        if (res.resultCode == 200) {
          let list = res.data
          state.list = list
          let n = list.findIndex(item => item.status == '0')
          n == -1 ? state.couponShow = false : state.couponShow = true
        }
      })
    }
    const tabSwitch = (item, index) => {
      // getGoodLists(index == 0 ? null : state.tabList[index - 1].categoryId)
    }
    const getGoodLists = (id) => {
      getGoodList({ id: id }).then(res => {
        if (res.resultCode == 200) {
          state.productList = res.data
        }
      })
    }
    const jumpTo = (url) => {
      Taro.navigateTo({ url: url });
    }
    const receive = (couponId, index) => {
      getCoupon({ couponId: couponId, pUserId: null }).then(res => {
        if (res.resultCode == 200) {
          Taro.showToast({
            title: '领取成功',
            icon: 'success',
            duration: 2000
          })
          getCouponlist()
        }
      })
    }
    const getCoupons = (id) => {
      getCoupon({ couponId: id }).then(res => {
        if (res.resultCode == 200) {
          Taro.showToast({
            title: '领取成功',
            icon: 'success',
            duration: 2000
          })
          if (state.coupon.goodsId) {
            Taro.navigateTo({ url: '/packageA/pages/productDetail/index?goodsId=' + state.coupon.goodsId })
          } else {
            state.show = false
            Taro.navigateTo({ url: '/pages/index/index?couponId=0' })
          }
        }
      })
    }
    return { state, tabSwitch, getGoodLists, jumpTo, receive, getCoupons, getCouponlist, time, endTime };
  }
};
</script>
<style lang="scss">
.notice-bar {
  position: fixed;
  bottom: calc(var(--nut-tabbar-height, 100rpx) + env(safe-area-inset-bottom));
  width: 100%;

  .btn {
    border: 1rpx solid #F0C5A4;
    border-radius: 20rpx;
    height: 40rpx;
    line-height: 40rpx;
    margin-left: 100rpx;
    font-size: 24rpx;
    padding: 0 20rpx;
  }
}

.product-title {
  margin: 0 32rpx 20rpx;
  box-sizing: border-box;
  padding-left: 10rpx;

  .ms {
    font-size: 26rpx;
    margin-right: 20rpx;
    color: #72746F;
  }

  .countdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rpx;
    height: 50rpx;
    background: #FF7F31;
    color: #fff;
    font-size: 26rpx;
    border-radius: 10rpx;
  }

  .name {
    font-weight: bold;
    font-size: 32rpx;
  }

  .btn {
    align-items: center;
    background: #CEF542;
    text-align: center;
    width: 180rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 50rpx;
    font-weight: bold;
    font-size: 30rpx;
    justify-content: center;
  }
}

.product-tab {
  padding-bottom: 100rpx;

  .nut-tabbar {
    width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
    padding-left: 20rpx;
  }

  .nut-tabbar-item {
    display: inline-block;
    // width: 120rpx;
    // text-align: center;
    margin-right: 50rpx;
    line-height: var(--nut-tabbar-height, 100rpx);
  }
}

.product-list {
  overflow: hidden;
  box-sizing: border-box;
  margin: 10rpx 32rpx 0;

  .product-item {
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    padding: 20rpx;

    .right {
      width: calc(100% - 200rpx);
      box-sizing: border-box;
    }

    .img {
      background: #fff;
      text-align: center;
      height: 180rpx;
      width: 180rpx;
      border-radius: 20rpx;
      margin-right: 20rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }

    // div {
    //   word-break: keep-all;
    //   white-space: nowrap;
    //   overflow: hidden;
    //   text-overflow: ellipsis;
    // }

    .title {
      font-size: 28rpx;
      margin-bottom: 15rpx;
      font-weight: bold;
      color: #0B1117;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .info {
      color: #FCB367;
      font-size: 26rpx;
      font-weight: 600;
      margin-bottom: 5rpx;
    }

    .price {
      font-size: 26rpx;

      .orgin {
        text-decoration: line-through;
        color: #666;
        margin-left: 10rpx;
        font-size: 26rpx;
      }

      .sell {
        font-weight: bold;
        color: #F25C26;
      }
    }
  }
}

.popup-coupon {
  .nut-popup__close-icon {
    top: 0rpx;
    right: 0;
  }

  .coupon {
    margin: 40rpx auto;
    background: #FF6E30;
    box-shadow: 0 0 20rpx 20rpx #F9F9F9;
    border-radius: 20rpx;
    width: 94%;
    padding: 40rpx 0 40rpx 30rpx;
    box-sizing: border-box;
    color: #fff;

    .left {
      margin-right: 20rpx;

      div:first-child {
        font-size: 36rpx;
      }

      div:last-child {
        font-size: 24rpx;
      }
    }

    .middle {
      width: 250rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      div:first-child {
        font-weight: bold;
        font-size: 24rpx;
      }

      div:last-child {
        font-size: 24rpx;
      }
    }

    .right {
      width: 30%;
      border-left: 1rpx dashed #EAEAEA;
      position: relative;

      div {
        display: inline-block;
        border-radius: 30rpx;
        padding: 6rpx 15rpx;
        border: 1rpx solid #fff;
        font-size: 22rpx;
        color: #FB452E;
        background: #fff;
        white-space: nowrap;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999999;
      }

      img {
        width: 80rpx;
        height: 80rpx;
        position: absolute;
        right: 30rpx;
        bottom: 0;
        transform: rotate(-10deg);
      }
    }
  }
}
</style>